<template>
	<view class="lottery-container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="iconfont icon-back">←</text>
			</view>
			<view class="nav-title">幸运大转盘</view>
			<view class="nav-right">
				<text class="iconfont icon-rule" @click="showRules">规则</text>
			</view>
		</view>
		
		<!-- 转盘区域 -->
		<view class="lottery-section">
			
			<view class="lottery-bg">
				<!-- 转盘 -->
				<view class="wheel-container">
					<!-- 外围花边和彩灯 -->
					<view class="wheel-border">
						<view class="border-light" v-for="(light, index) in borderLights" :key="index" 
							:style="{
								left: light.x + '%',
								top: light.y + '%',
								animationDelay: light.delay + 's',
								background: light.color
							}">
						</view>
					</view>
					
					<view class="wheel" :style="{ transform: `rotate(${rotateAngle}deg)` }">
						<view 
							class="prize-item" 
							v-for="(item, index) in prizeList" 
							:key="index"
							:style="{
								transform: `rotate(${index * (360 / prizeList.length)}deg)`,
								background: index % 2 === 0 
									? 'radial-gradient(circle at 70% 30%, #ffecd2 0%, #fcb69f 100%)' 
									: 'radial-gradient(circle at 30% 70%, #a1c4fd 0%, #c2e9fb 100%)',
								clipPath: `polygon(100% 100%,0 100%,${-250*Math.cos( angle)}rpx ${-250*Math.sin( angle)}rpx)`
							}"
						>
							<view class="prize-content">
								
								<text class="prize-name">{{ item.name }}</text>
							</view>
						</view>
					</view>
					
					<!-- 指针 -->
					<view class="pointer" @click="startLottery">
						<view class="pointer-btn">
							<text class="pointer-text">{{ isRotating ? '抽奖中...' : '开始抽奖' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 奖品展示 -->
		<view class="prize-showcase">
			<view class="showcase-title">
				<text class="title-text">奖品展示</text>
			</view>
			<view class="prize-grid">
				<view class="prize-card" v-for="(item, index) in prizeList" :key="index">
					<view class="prize-card-icon">{{ item.name.includes('红包') ? '💰' : '🎁' }}</view>
					<text class="prize-card-name">{{ item.name }}</text>
					<text class="prize-card-desc">{{ item.desc }}</text>
				</view>
			</view>
		</view>
		
		<!-- 我的奖品 -->
		<view class="my-prizes">
			<view class="my-prizes-header">
				<text class="my-prizes-title">我的奖品</text>
				<text class="my-prizes-count">({{ myPrizes.length }})</text>
			</view>
			<view class="my-prizes-list" v-if="myPrizes.length > 0">
				<view class="my-prize-item" v-for="(item, index) in myPrizes" :key="index">
					<view class="my-prize-icon">{{ item.name.includes('红包') ? '💰' : '🎁' }}</view>
					<view class="my-prize-info">
						<text class="my-prize-name">{{ item.name }}</text>
						<text class="my-prize-time">{{ item.time }}</text>
					</view>
					<view class="my-prize-status" :class="item.status">
						{{ item.status === 'used' ? '已使用' : '未使用' }}
					</view>
				</view>
			</view>
			<view class="empty-prizes" v-else>
				<text class="empty-text">暂无奖品，快来抽奖吧！</text>
			</view>
		</view>
		
		<!-- 规则弹窗 -->
		<u-popup v-model="showRulesPopup" mode="center" width="80%" height="60%">
			<view class="rules-popup">
				<view class="rules-header">
					<text class="rules-title">活动规则</text>
					<text class="rules-close" @click="showRulesPopup = false">×</text>
				</view>
				<scroll-view class="rules-content" scroll-y>
					<view class="rule-item" v-for="(rule, index) in rules" :key="index">
						<text class="rule-number">{{ index + 1 }}.</text>
						<text class="rule-text">{{ rule }}</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 中奖弹窗 -->
		<u-popup v-model="showWinPopup" mode="center" width="80%" height="50%">
			<view class="win-popup">
				<view class="win-header">
					<text class="win-title">🎉 恭喜中奖 🎉</text>
				</view>
				<view class="win-content">
					<view class="win-prize-icon">{{ currentPrize.name && currentPrize.name.includes('红包') ? '💰' : '🎁' }}</view>
					<text class="win-prize-name">{{ currentPrize.name }}</text>
					<text class="win-prize-desc">{{ currentPrize.desc }}</text>
					<text class="win-prize-value" v-if="currentPrize.value">价值: ¥{{ currentPrize.price }}</text>
				</view>
				<view class="win-actions">
					<button class="win-btn win-btn-primary" @click="confirmWin">确认领取</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audioContext: null,
				id: '',
				// 转盘旋转角度
				rotateAngle: 0,
				// 是否正在旋转
				isRotating: false,
				// 外围彩灯配置
				borderLights: [
					{ x: 0, y: 50, color: '#FF6B6B', delay: 0 },
					{ x: 8, y: 15, color: '#4ECDC4', delay: 0.5 },
					{ x: 25, y: 5, color: '#FFD93D', delay: 1 },
					{ x: 50, y: 0, color: '#6BCF7F', delay: 1.5 },
					{ x: 75, y: 5, color: '#A8E6CF', delay: 2 },
					{ x: 92, y: 15, color: '#FF8B94', delay: 2.5 },
					{ x: 100, y: 50, color: '#FF6B6B', delay: 3 },
					{ x: 92, y: 85, color: '#4ECDC4', delay: 3.5 },
					{ x: 75, y: 95, color: '#FFD93D', delay: 4 },
					{ x: 50, y: 100, color: '#6BCF7F', delay: 4.5 },
					{ x: 25, y: 95, color: '#A8E6CF', delay: 5 },
					{ x: 8, y: 85, color: '#FF8B94', delay: 5.5 }
				],
				// 奖品列表
				prizeList: [					
				],
				// 我的奖品
				myPrizes: [],
				// 当前中奖奖品
				currentPrize: {},
				// 弹窗控制
				showRulesPopup: false,
				showWinPopup: false,
				// 活动规则
				rules: [
					'每人每天可免费抽奖3次',
					'抽奖次数每日0点重置',
					'中奖后请在24小时内领取奖品',
					'红包类奖品直接发放到账户余额',
					'实物奖品将在7个工作日内发货',
					'本活动最终解释权归平台所有'
				]
			}
		},

		computed: {
			angle() {
				return (360 / this.prizeList.length)*(Math.PI/180);
			}
		},
	
		onLoad(e) {
			this.loadPrizeList();
			this.initPrizeAngles();
			this.loadMyPrizes();
			this.id = e.id;
			console.log(e.id)
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.src = 'https://admin.cqycgyl.com/uploads/20250724/fcab41c37ca3e209cdf7d2199d3518f5.wav';
			
		},
		methods: {
			// 加载奖品列表
			loadPrizeList() {
				console.log('加载奖品列表');
				
				let userId = uni.getStorageSync("lifeData").vuex_user.user_id;
				if (!userId) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				this.$u.api.index.getPrizeList({user_id: userId}).then(res => {
					console.log('奖品列表:', res);
					if (res.code === 1 && res.data) {
						// 转换接口数据格式为前端需要的格式
						this.prizeList = res.data.map(item => ({
							id: item.id,
							name: item.prize_name,
							desc: item.description || '恭喜中奖',
							probability: item.odds / 100, // 将百分比转换为小数
							value: item.value,
							prize_type: item.prize_type
						}));
						
						// 重新初始化角度
						this.initPrizeAngles();
					} else {
						uni.showToast({
							title: res.msg || '获取奖品列表失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取奖品列表失败:', err);
					uni.showToast({
						title: '获取奖品列表失败',
						icon: 'none'
					});
				});
			},
			
			// 初始化奖品角度
			initPrizeAngles() {
				const itemCount = this.prizeList.length;
				const angleStep = 360 / itemCount;
				
				this.prizeList.forEach((item, index) => {
					item.angle = index * angleStep;
				});
			},
			
			// 获取奖品项样式 - 动态扇形
			getPrizeItemStyle(index) {
				const itemCount = this.prizeList.length;
				const angleStep = 360 / itemCount;
				const angle = index * angleStep;
				
				// 计算扇形的clip-path
				const radius = 50; // 半径百分比
				const startAngle = angle * Math.PI / 180;
				const endAngle = (angle + angleStep) * Math.PI / 180;
				
				// 计算扇形的顶点
				const x1 = 50 + radius * Math.cos(startAngle);
				const y1 = 50 - radius * Math.sin(startAngle);
				const x2 = 50 + radius * Math.cos(endAngle);
				const y2 = 50 - radius * Math.sin(endAngle);
				
				// 创建扇形路径
				const clipPath = `polygon(50% 50%, ${x1.toFixed(2)}% ${y1.toFixed(2)}%, ${x2.toFixed(2)}% ${y2.toFixed(2)}%)`;
				
				// 动态颜色 - 根据索引交替
				const colors = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#6BCF7F', '#A8E6CF', '#FF8B94'];
				const color = colors[index % colors.length];
				
				return {
					transform: `rotate(${angle}deg)`,
					background: color,
					clipPath: clipPath
				};
			},
			
			// 计算内容角度
			getContentAngle(index) {
				const itemCount = this.prizeList.length;
				const angleStep = 360 / itemCount;
				const angle = index * angleStep;
				return angle + angleStep / 2; // 扇形中心角度
			},
			

			
			// 开始抽奖
			startLottery() {
				if (this.isRotating) return;
				this.audioContext.src = 'https://admin.cqycgyl.com/uploads/20250724/fcab41c37ca3e209cdf7d2199d3518f5.wav';
				this.audioContext.play();
				let userId = uni.getStorageSync("lifeData").vuex_user.user_id;
				if (!userId) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				this.isRotating = true;
				
				let model = uni.getSystemInfoSync().model;
				// 调用后端抽奖接口
				this.$u.api.index.getLottery({user_id: userId,model:model}).then(res => {
					console.log('抽奖结果:', res);
					
					if (res.code === 1 && res.data) {
						// 根据后端返回的奖品ID找到对应的奖品
						const selectedPrize = this.prizeList.find(item => item.id === res.data.prize.id);
						selectedPrize.price = res.data.price;
						
						if (selectedPrize) {
							// 更新奖品信息，包含后端返回的详细信息
							Object.assign(selectedPrize, {
								value: res.data.prize.value,
								prize_type: res.data.prize.prize_type
							});
							const targetAngle = this.calculateTargetAngle(selectedPrize);
							
							// 计算旋转角度（多转几圈再停到目标位置）
							const circles = 5; // 转5圈
							const finalAngle = circles * 360 + targetAngle;
							
							// 执行旋转动画
							this.rotateAngle = 0;
							setTimeout(() => {
								this.rotateAngle = finalAngle;
							}, 50);
							
							// 动画结束后显示结果
							setTimeout(() => {
								this.isRotating = false;
								this.currentPrize = selectedPrize;
								this.showWinPopup = true;
								this.addToMyPrizes(selectedPrize);
								this.deductChance();
								this.audioContext.stop();
								this.audioContext.src = 'https://admin.cqycgyl.com/uploads/20250724/23a0ea4d7f2a33b902d68227479d1b72.mp3';
								this.audioContext.play();
							}, 3000);
						} else {
							this.isRotating = false;
							uni.showToast({
								title: '奖品信息错误',
								icon: 'none'
							});
						}
					} else {
						this.isRotating = false;
						uni.showToast({
							title: res.msg || '抽奖失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('抽奖失败:', err);
					this.isRotating = false;
					uni.showToast({
						title: '抽奖失败，请重试',
						icon: 'none'
					});
				});
			},
			
			// 随机选择奖品
			selectRandomPrize() {
				const random = Math.random();
				let cumulativeProbability = 0;
				
				for (let prize of this.prizeList) {
					cumulativeProbability += prize.probability;
					if (random <= cumulativeProbability) {
						return prize;
					}
				}
				
				// 默认返回谢谢参与
				return this.prizeList.find(item => item.name === '谢谢参与');
			},
			
			// 计算目标角度
			calculateTargetAngle(prize) {
				const itemCount = this.prizeList.length;
				const angleStep = 360 / itemCount;
				const prizeIndex = this.prizeList.findIndex(item => item.id === prize.id);
				const targetAngle = prizeIndex * angleStep;
				
				// 指针指向12点钟方向，所以需要调整角度
				return 360 - targetAngle;
			},
			
			// 添加到我的奖品
			addToMyPrizes(prize) {
				if (prize.name === '谢谢参与') return;
				
				const newPrize = {
					...prize,
					time: this.formatTime(new Date()),
					status: 'unused'
				};
				
				this.myPrizes.unshift(newPrize);
				this.saveMyPrizes();
			},
			
			// 保存我的奖品
			saveMyPrizes() {
				uni.setStorageSync('myPrizes', this.myPrizes);
			},
			
			// 加载我的奖品
			loadMyPrizes() {
				const saved = uni.getStorageSync('myPrizes');
				if (saved) {
					this.myPrizes = saved;
				}
			},
			
			// 获取剩余抽奖次数
			getRemainingChances() {
				const today = this.formatDate(new Date());
				const usedChances = uni.getStorageSync(`lottery_chances_${today}`) || 0;
				return Math.max(0, 3 - usedChances);
			},
			
			// 扣除抽奖次数
			deductChance() {
				const today = this.formatDate(new Date());
				const usedChances = uni.getStorageSync(`lottery_chances_${today}`) || 0;
				uni.setStorageSync(`lottery_chances_${today}`, usedChances + 1);
			},
			
			// 确认领取奖品
			confirmWin() {
				// 这里可以调用后端接口来确认领取奖品
				// 暂时直接显示成功提示
				uni.showToast({
					title: '奖品已发放到账户',
					icon: 'success',
					success: () => {
						this.showWinPopup = false;
						uni.redirectTo({
							url:`/pages/shop/Paysuccess?id=${this.id}`
						})
					}
				});
				
			},
			
			// 显示规则
			showRules() {
				this.showRulesPopup = true;
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			
			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped>
	.lottery-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding-bottom: 40rpx;
	}
	
	/* 导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10rpx);
	}
	
	.nav-left, .nav-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
	}
	
	.nav-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	/* 转盘区域 */
	.lottery-section {
		padding: 40rpx 30rpx;
	}
	
	.lottery-bg {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 30rpx;
		padding: 40rpx;
		backdrop-filter: blur(10rpx);
	}
	
	.wheel-container {
		position: relative;
		width: 600rpx;
		height: 600rpx;
		margin: 0 auto;
		overflow: visible;
		border-radius: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 外围花边和彩灯 */
	.wheel-border {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.border-light {
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		box-shadow: 0 0 20rpx currentColor;
		animation: lightFlash 3s ease-in-out infinite;
		z-index: 2;
	}
	
	@keyframes lightFlash {
		0%, 100% {
			opacity: 0.3;
			transform: scale(0.8);
		}
		50% {
			opacity: 1;
			transform: scale(1.2);
		}
	}
	
	.wheel {
		width: 500rpx;
		height: 500rpx;
		border-radius: 50%;
		position: relative;
		transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		background: #f5f5f5;
		z-index: 3;
		/* 添加内阴影效果 */
		box-shadow: inset 0 0 30rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	
	.prize-item {
		position: absolute;
		width: 250rpx;
		height: 250rpx;
		left: 0;
		top: 0;
		transform-origin: 100% 100%;
		
	}
	
	.prize-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		-webkit-transform: rotate(-22.5deg);
		transform: rotate(14.5deg);
		width: 100%;
		height: 169%;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.prize-icon {
		font-size: 40rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}
	
	.prize-name {
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		line-height: 1.2;
	}
	
	/* 指针 */
	.pointer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}
	
	.pointer-btn {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(45deg, #FFD700, #FFA500);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		cursor: pointer;
		/* 添加发光效果 */
		animation: pointerGlow 2s ease-in-out infinite;
	}
	
	@keyframes pointerGlow {
		0%, 100% {
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		}
		50% {
			box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.5);
		}
	}
	
	.pointer-text {
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	/* 奖品展示 */
	.prize-showcase {
		margin: 40rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		padding: 30rpx;
		backdrop-filter: blur(10rpx);
	}
	
	.showcase-title {
		margin-bottom: 30rpx;
	}
	
	.title-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.prize-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
	
	.prize-card {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
	}
	
	.prize-card-icon {
		font-size: 60rpx;
		margin-bottom: 15rpx;
		text-align: center;
	}
	
	.prize-card-name {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.prize-card-desc {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
	}
	
	/* 我的奖品 */
	.my-prizes {
		margin: 40rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		padding: 30rpx;
		backdrop-filter: blur(10rpx);
	}
	
	.my-prizes-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.my-prizes-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.my-prizes-count {
		color: rgba(255, 255, 255, 0.8);
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	
	.my-prizes-list {
		max-height: 400rpx;
		overflow-y: auto;
	}
	
	.my-prize-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
	}
	
	.my-prize-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
		text-align: center;
		width: 60rpx;
	}
	
	.my-prize-info {
		flex: 1;
	}
	
	.my-prize-name {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.my-prize-time {
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}
	
	.my-prize-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
	
	.my-prize-status.unused {
		background: #4CAF50;
		color: #fff;
	}
	
	.my-prize-status.used {
		background: #9E9E9E;
		color: #fff;
	}
	
	.empty-prizes {
		text-align: center;
		padding: 60rpx 0;
	}
	
	.empty-text {
		color: rgba(255, 255, 255, 0.6);
		font-size: 28rpx;
	}
	
	/* 弹窗样式 */
	.rules-popup {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.rules-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.rules-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.rules-close {
		font-size: 40rpx;
		color: #999;
		cursor: pointer;
	}
	
	.rules-content {
		flex: 1;
	}
	
	.rule-item {
		display: flex;
		margin-bottom: 20rpx;
		line-height: 1.6;
	}
	
	.rule-number {
		color: #FF6B6B;
		font-weight: bold;
		margin-right: 10rpx;
		min-width: 40rpx;
	}
	
	.rule-text {
		color: #666;
		font-size: 28rpx;
		flex: 1;
	}
	
	/* 中奖弹窗 */
	.win-popup {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.win-header {
		margin-bottom: 40rpx;
	}
	
	.win-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF6B6B;
	}
	
	.win-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.win-prize-icon {
		font-size: 80rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}
	
	.win-prize-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
	}
	
	.win-prize-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}
	
	.win-prize-value {
		font-size: 32rpx;
		color: #FF6B6B;
		font-weight: bold;
	}
	
	.win-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}
	
	.win-btn {
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		border: none;
		cursor: pointer;
	}
	
	.win-btn-primary {
		background: #FF6B6B;
		color: #fff;
	}
	
	.win-btn-secondary {
		background: #f5f5f5;
		color: #666;
	}
</style>
